import React, { useMemo } from "react";
import "./index.scss";

interface TimerProps {
  sec: number;
}

/**
 * @className timer
 */
const Timer: React.FC<TimerProps> = ({ sec }) => {
  const timeString = useMemo(() => {
    const hours = Math.floor(sec / 3600);
    const minutes = Math.floor((sec - hours * 3600) / 60);
    const seconds = sec - hours * 3600 - minutes * 60;

    return [
      hours.toString().padStart(2, "0"),
      minutes.toString().padStart(2, "0"),
      seconds.toString().padStart(2, "0"),
    ].join(":");
  }, [sec]);

  return <div className="timer">{timeString}</div>;
};

export default Timer;
